<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <style>
        body {
            background-color: whitesmoke;

        }

        /* 一堆背景色 */
        .box {
            top: 50%;
            background-color: white;
            width: 60%;
            height: 70%;
            position: absolute;
            left: 20%;
            display: flex;
            justify-content: left;
            align-items: center;
        }

        .bg {
            background-color: rgb(51, 51, 223);
            position: absolute;
            width: 100%;
            height: 60%;
            font-size: 30px;
            text-align: center;
            font-style: italic;
            line-height: 500px;
        }

        /* 浮动菜单 */
        .nav {
            top: 0;
            left: 0;
            position: fixed;
            width: 100%;
            height: 10%;
            background-color: white;
        }

        .nav>ul {
            display: flex;
            list-style: none;
            margin-left: 100px
        }

        .nav>ul>li {

            margin-left: 100px
        }

        /* 容器 */
        #container {
            text-align: center;
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #container>input {
            margin-left: 50px;
            background-color: rgb(216, 248, 248);
            border-radius: 25px/50px;
            width: 280px;
            height: 50px;
            margin-top: 50px;
            outline-color: rgb(0, 153, 255);
            border: 1px rgba(245, 245, 245, 0.859) solid;
            box-shadow: 0 0 2px black;
        }


        #sub {
            cursor: pointer;
            background: linear-gradient(to right, whitesmoke, rgb(51, 51, 223));
            /* border: 2px solid transparent; */
            box-shadow: 0 0 2px black;

        }
    </style>
</head>

<body>
    <div class="bg">欢迎来到xxx学习空间</div>
    <div class="nav">
        <ul>
            <li>课程1</li>
            <li>课程2</li>
            <li>课程3</li>
            <li>课程4</li>
            <li>课程5</li>
            <li>课程6</li>

        </ul>
        <hr>
    </div>
    <div class="box">
        <form action="" id="container">
            <label for=""></label><input type="text" name="" id="" placeholder="账号：手机号"><br>
            <label for=""></label><input type="password" name="" id="" placeholder="密码：请输入密码"><br>
            <input id="sub" type="submit" value="注册">
        </form>
    </div>
</body>

</html>